<template>
  <div class="content">
    <div class="top">
      <img @click="$router.go(-1)" src="~@/assets/images/login/back.png"/>
      <span>注册</span>
    </div>
    <div class="hello">
      <span>立即注册</span>
    </div>
    <div class="inputs">
      <div class="border">
        <img src="~@/assets/images/login/account.png"/>
        <input
          v-model="registerData.userName"
          placeholder="请设置您的用户名"
          @input="checkedRules"
          clearable
        />
      </div>
      <div class="border">
        <img src="~@/assets/images/nickname.png"/>
        <input
          v-model="registerData.nickname"
          placeholder="请设置您的昵称"
          @input="checkedRules"
          clearable
        />
      </div>
      <div class="border">
        <img src="~@/assets/images/login/password.png"/>
        <input
          v-model="registerData.password"
          placeholder="请设置您的登录密码"
          @input="checkedRules"
          :type="passShow?'text':'password'"
          clearable
        />
        <img class="icon" @click="passShow=!passShow" :src="require(`@/assets/images/login/${passShow?'show':'hide'}.png`)" />
      </div>
      <div class="border">
        <img src="~@/assets/images/login/password.png"/>
        <input
          v-model="password"
          placeholder="请再次设置登录密码"
          @input="checkedRules"
          :type="passShow?'text':'password'"
          clearable
        />
        <img class="icon" @click="passShow=!passShow" :src="require(`@/assets/images/login/${passShow?'show':'hide'}.png`)" />
      </div>
      <div class="border" v-if="codeType===1">
        <img src="~@/assets/images/login/yzm.png"/>
        <input v-model="captchaCode" placeholder="请输入验证码" />
        <img class="icon2" @click="getverifyCode" :src="verifyCode" />
      </div>
      <div class="border">
        <img src="~@/assets/images/login/account.png"/>
        <input
          v-model="registerData.inviteCode"
          placeholder="邀请码(选填)"
          @input="checkedRules"
          clearable
        />
      </div>
    </div>
    <div class="rules" v-if="!(rules.rule1&&rules.rule2&&rules.rule3&&rules.rule4&&rules.rule5)">
      <div class="rule" :class="rules.rule1?'checked':''">用户名最少5个字符，最多不超过16个字符</div>
      <div class="rule" :class="rules.rule2?'checked':''">用户名必须包含字母+数字，且以小写英文字母开头</div>
      <div class="rule" :class="rules.rule3?'checked':''">昵称最少两个字符，最多不超过10个字符，且不能包含空格</div>
      <div class="rule" :class="rules.rule4?'checked':''">密码最少6个字符，最多不超过20个字符，必须包含大小写字母和数字且不能包含空格</div>
      <div class="rule" :class="rules.rule5?'checked':''">两次密码输入必须一致</div>
    </div>
    <van-button class="button" :disabled="!(rules.rule1&&rules.rule2&&rules.rule3&&rules.rule4&&rules.rule5)" :loading="loading" @click="register">注册</van-button>
    <div class="text1">点击注册代表您同意<span>《服务条款》</span></div>
    <div class="bottom">
      <a class="kf" target="_blank" :href="baseData.data.online">联系客服</a>
    </div>
  </div>
</template>

<script>
import StorageModel from "@/utils/storage";
const Storage = new StorageModel();
import { AUTH } from "@/utils/constant";
import { Toast } from 'vant';
import api from "@/api";
import login from "@/api/login";
import { mapMutations, mapState, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      random: "",
      verifyCode: "",
      captchaCode: "",
      captchaIns: "",
      codeType: 3,//1-数字验证码, 2-滑块, 3-关闭

      loading: false,
      passShow: false,
      password: "",
      registerData: {
        "userName": "",
        "password": "",
        "nickname": "",
        "inviteCode": "",
      },
      rules: {
        rule1: false,
        rule2: false,
        rule3: false,
        rule4: false,
        rule5: false,
      },
    };
  },
  watch: {},
  computed: {
    ...mapState({
      baseData: state => state.global.baseData
    }),
  },
  methods: {
    ...mapActions({
      getBaseData: "global/getBaseData",
    }),
    checkedRules(){
      //rule1---用户名最少5个字符，最多不超过16个字符
      const regex1 = /^\S{5,16}$/;
      this.rules.rule1 = regex1.test(this.registerData.userName);

      //rule2---用户名必须包含字母+数字，且以小写英文字母开头
      const regex2 = /^[a-z][a-z0-9]*$/;
      this.rules.rule2 = regex2.test(this.registerData.userName);

      //rule3---昵称最少两个字符，最多不超过10个字符，且不能包含空格
      const regex3 = /^\S{2,10}$/;
      this.rules.rule3 = regex3.test(this.registerData.nickname);

      //rule4---密码最少6个字符，最多不超过20个字符，必须包含大小写字母和数字且不能包含空格
      const regex4 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/
      this.rules.rule4 = regex4.test(this.registerData.password);

      //rule5---两次密码输入必须一致
      this.rules.rule5 = this.registerData.password!=='' && (this.registerData.password === this.password);
    },
    register(){
      if(!this.registerData.userName){
        this.$toast("请输入用户名");
        return false;
      }
      if(!this.registerData.nickname){
        this.$toast("请输入昵称");
        return false;
      }
      if(!this.registerData.password){
        this.$toast("请输入密码");
        return false;
      }
      if(!this.password){
        this.$toast("请输入密码");
        return false;
      }
      if(this.codeType === 2){
        this.captchaIns.show();
      }else{
        this.handle()
      }
    },
    handle(xtoken=""){
      api.setXToken(xtoken || this.random);
      login.register({
        ...this.registerData,
        captchaCode: this.captchaCode,
      }).then(res => {
        this.loading = true;
        if(res.data.code === 0){
          Toast.success('恭喜您注册成功！');
          setTimeout(() => {
            this.$router.push("/login");
          }, 500);
        }else{
          Toast({
            className: 'toastClass',
            message: res.data.message,
            icon: 'cross',
          });
        }
        this.captchaIns.hide();
        this.reloadVode();
        this.loading = false;
      });
    },
    getCodeType(){
      login.getCodeType().then(res => {
        if(res.data.code === 0){
          this.codeType = res.data.data;
          if(this.codeType === 2){

          }else if(this.codeType === 1){
            this.getverifyCode();
          }
        }
      });
    },
    getverifyCode() {
      let random = Date.now();
      this.random = random;
      this.verifyCode = api.captcha(random);
    },
    reloadVode() {
      this.captchaCode = "";
      this.captchaIns && this.captchaIns.reload();
    },
  },
  mounted() {
    if(Storage.get(AUTH)){
      console.log(Storage.get(AUTH))
      logout()
    }
    if(!this.baseData){
      this.getBaseData()
    }
    // 网盾
    let self = this;
    this.captchaIns = _dx.Captcha(document.getElementById("captcha"), {
      appId: "4841b7b1fafa733c1d940a468cf022af",
      apiServer: "https://api-pro.dingxiang-inc.com",
      style: "popup",
      success:  (xtoken) => {
        if (self.codeType === 2) {
          self.captchaCode = xtoken;
          self.$nextTick(() => {
            self.handle(xtoken);
          });
        }
      },
    });
    this.captchaIns.on("ready", function () {
      console.log("captcha is ready!");
    });

    this.captchaIns.on("verifySuccess", function (security_code) {
      console.log("security_code is: " + security_code);
    });
    this.getCodeType();
  },
  beforeDestroy() {
    this.reloadVode();
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
.content{
  background-image: url('../assets/images/login/bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: relative;
  overflow: auto;
  .top{
    position: relative;
    text-align: center;
    img{
      width: 10px;
      height: 18px;
      position: absolute;
      left: 0;
      top: 10px;
    }
    span{
      font-size: 16px;
      font-weight: Medium;
      text-align: center;
      color: #222222;
      line-height: 22.5px;
    }
  }
  .hello{
    margin-top: 45px;
    margin-bottom: -13px;
    display: flex;
    flex-direction: column;
    span{
      font-size: 16px;
      font-weight: Medium;
      color: #222222;
      line-height: 25px;
      margin-top: 2px;
    }
  }
  .inputs{
    padding-top: 10px;
    .border{
      width: 100%;
      height: 50px;
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      position: relative;
      img{
        width: 19px;
        height: 19px;
        margin-left: 16px;
      }
      input{
        border: none;
        background: none;
        margin-left: 6px;
        font-size: 14px;
        outline: none;
        width: 100%;
        line-height: 50px;
      }
      .icon{
        width: 20px;
        height: 13px;
        margin: 0;
        position: absolute;
        right: 15px;
        top: 18px;
      }
      .icon2{
        width: 90px;
        height: auto;
        margin: 0;
        position: absolute;
        right: 5px;
        top: 3px;
      }
    }
  }
  .button{
    margin-top: 20px;
    height: 50px;
    background: #479fff;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    line-height: 50px;
    display: block;
    border: none;
    width: 100%;
  }
  /deep/.van-button--disabled{
    background: lightgray;
  }
  .bottom{
    position: absolute;
    bottom: 30px;
    text-align: center;
    // left: calc(50% - 42px);
    width: calc(100% - 30px);
    .kf{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #479fff;
      line-height: 20px;
      &:before{
        content: ' ';
        display: block;
        width: 19px;
        height: 19px;
        background-image: url('../assets/images/login/kf.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-right: 8px;
      }
    }
  }
  .text1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: Regular;
    text-align: center;
    color: #8f949c;
    line-height: 20px;
    margin-top: 24px;
    span{
      color: #479FFF;
    }
  }
  .rules{
    margin-top: 15px;
    .rule{
      font-size: 13px;
      font-weight: Regular;
      color: #8f949c;
      line-height: 18.5px;
      padding-left: 26px;
      margin-bottom: 8px;
      position: relative;
      &::after{
        content: ' ';
        display: block;
        background-image: url('../assets/images/registerIcon.png');
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .checked{
      color: #479FFF;
      &::after{
        background-image: url('../assets/images/registerIconCheck.png');
        background-size: 100% 100%;
      }
    }
  }
}
</style>
